<style>
.insert-dialog_table .ivu-table .ivu-table-header th,
.insert-dialog_table .ivu-table .ivu-table-body td {
  height: 30px;
}
</style>
<template>
  <div>
    <Table class="insert-dialog_table" size="mini" :ref="refs" :columns="columnsList" :data="thisTableData" border :loading="loading"></Table>
  </div>
</template>
<script>
const editButton = (vm, h, currentRow, index, disabled) => {
  return h(
    "Button",
    {
      props: {
        type: currentRow.editting ? "success" : "primary",
        loading: currentRow.saving,
        size: "small",
        disabled: disabled
      },
      style: {
        margin: "0 5px"
      },
      on: {
        click: () => {
          // currentRow.editting 默认为 false 所以会渲染 编辑按钮
          if (!currentRow.editting) {
            vm.edittingStore[index].editting = true
            vm.thisTableData = JSON.parse(JSON.stringify(vm.edittingStore))
          } else {
            let edittingRow = vm.edittingStore[index]
            edittingRow.editting = false
            vm.thisTableData = JSON.parse(JSON.stringify(vm.edittingStore))
            // vm.$emit('input', vm.handleBackdata(vm.thisTableData));
            vm.$emit("save", vm.handleBackdata(vm.thisTableData), index)
          }
        }
      }
    },
    currentRow.editting ? "保存" : "编辑"
  )
}
export default {
  created() {
    this.init()
  },
  props: {
    refs: String,
    columnsList: Array,
    value: Array,
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      thisTableData: [],
      edittingStore: [],
      channelTypeLists: [
        {
          name: "剩余电流",
          value: 1
        },
        {
          name: "温度",
          value: 2
        },
        {
          name: "电弧",
          value: 3
        }
      ]
    }
  },
  watch: {
    value(val) {
      this.init()
    }
  },
  methods: {
    init() {
      let that = this
      let cloneData = JSON.parse(JSON.stringify(this.value))
      cloneData.forEach(item => {
        // 默认状态是显示 编辑按钮，所以 editting 是 false
        item["editting"] = false
      })
      this.thisTableData = cloneData

      // 初始值 是editting = false 显示编辑
      this.edittingStore = JSON.parse(JSON.stringify(this.thisTableData))

      // 可编辑 $editable
      // 可选择 $selectable
      // 有操作 $handle
      this.columnsList.forEach(item => {
        // 可编辑
        if (item.$editable) {
          item.render = (h, param) => {
            // 当前行
            let currentRow = this.thisTableData[param.index]
            // 是否是正在编辑状态
            if (!currentRow.editting) {
              return h("span", currentRow[item.key])
            } else {
              return h("Input", {
                props: {
                  type: "text",
                  value: currentRow[item.key],
                  size: "small"
                },
                on: {
                  "on-change"(event) {
                    let key = param.column.key
                    let target_value = event.target.value.trim()
                    that.edittingStore[param.index][key] = target_value
                  }
                }
              })
            }
          }
        }

        // 可选择
        if (item.$selectable) {
          item.render = (h, param) => {
            let currentRow = this.thisTableData[param.index]
            let channelTypeMap = {
              1: "剩余电流",
              2: "温度",
              3: "电弧"
            }
            if (!currentRow.editting) {
              return h("span", channelTypeMap[currentRow[item.key]])
            } else {
              let children = []
              children = this.channelTypeLists.map(t => {
                return h(
                  "Option",
                  {
                    props: {
                      value: t.value
                    }
                  },
                  t.name
                )
              })
              return h(
                "Select",
                {
                  props: {
                    value: currentRow[item.key],
                    size: "small"
                  },
                  on: {
                    "on-change": event => {
                      let key = param.column.key
                      that.edittingStore[param.index][key] = event
                    }
                  }
                },
                children
              )
            }
          }
        }

        // 可操作
        if (item.$handle) {
          item.render = (h, param) => {
            let currentRowData = this.thisTableData[param.index]
            let children = []
            item.$handle.forEach(item => {
              if (item === "edit") {
                children.push(
                  editButton(
                    this,
                    h,
                    currentRowData,
                    param.index,
                    this.disabled
                  )
                )
              }
            })
            return h("div", children)
          }
        }

        // 数字
        if (item.$number) {
          item.render = (h, param) => {
            // 当前行
            let currentRow = this.thisTableData[param.index]
            // 是否是正在编辑状态
            if (!currentRow.editting) {
              return h("span", currentRow[item.key])
            } else {
              return h("InputNumber", {
                props: {
                  value: currentRow[item.key],
                  size: "small"
                },
                on: {
                  "on-change"(value) {
                    const key = param.column.key
                    that.edittingStore[param.index][key] = value
                  }
                }
              })
            }
          }
        }
      })
    },

    handleBackdata(data) {
      let clonedData = JSON.parse(JSON.stringify(data))
      clonedData.forEach(item => {
        delete item.editting
      })
      return clonedData
    }
  }
}
</script>
